<template>
  <div id="SoundEqHome">
    <div class="queryClass">
      <a-select
        v-model="equipId"
        @change="selectChange"
        style="width: 180px"
        placeholder="请选择设备"
      >
        <a-select-option
          v-for="item in equipList"
          :key="item.id"
          :value="item.id"
          >{{ item.name }}</a-select-option
        >
      </a-select>
    </div>
    <div class="viewBox" @click="routeClick"></div>
  </div>
</template>

<script>
export default {
  props: {
    equipList: {},
  },
  data() {
    return {
      equipId:null,
      equipName:null,
    };
  },
  created() {
    this.equipId = this.equipList[0].id;
    this.equipName=this.equipList[0].name;
  },
  methods: {
    selectChange(val){
      let obj=this.equipList.find(item=>item.name==val);
      this.equipName=obj.name;
    },
    routeClick() {
      let url =
        overallSituation.homeUrl +
        "?token=" +
        localStorage.getItem("token") +
        "&type=" +
        2 +
        "&equipId=" +
        this.equipId +
        "&equipName="+
        this.equipName;
      window.open(url);
    },
  },
};
</script>

<style lang="scss" scoped>
#SoundEqHome {
  position: relative;
  .queryClass {
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
  }
  .viewBox {
    width: 1000px;
    height: 600px;
    background-image: url("/homeView.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin: 60px auto;
    cursor: pointer;
  }
}
</style>